<template>
	<div>
		<!-- 现场图片弹窗 -->
    <el-dialog 
      :title="viewPicTitle"
      append-to-body 
      :visible.sync="localPicBox" 
      :close-on-click-modal="false" 
      :before-close="handleClosePicBox"
      width="50%"
      class="view_picture"
    >
      <el-carousel indicator-position="outside" trigger="click" :autoplay="false">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <a :href="downloadHead + item.id">
            <img :src="item.url" alt />
          </a>
        </el-carousel-item>
      </el-carousel>

      <!-- 按钮 -->
      <div class="view_picture_footer">
        <el-button 
          type="primary"
          size="small"
          @click="confirmViewPicture()">
          确 认
        </el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
export default {
  props: {
    localPicBox: {default: false},
    localPictures: {default: []},
    viewPicTitle: {default: "图片"}
  },
  data() {
    return {
      imgList: [],
      downloadHead: "/api/fileManager/download/",
    }
  },
  watch: {
    localPicBox() {
      if(this.localPicBox === true) {
        this.initData();
      }
    },
  },
  methods: {

    // 初始化图片
    initData() {
      this.imgList = [];
      this.localPictures.forEach(item => {
        this.imgList.push({
          url: item.fileUrl,
          id: item.id
        });
      });
    },

    // 确认照片
    confirmViewPicture() {
      this.$emit('confirmViewPicture');
    },

    // 关闭弹窗
    handleClosePicBox(done) {
      done();
      this.$emit('handleClosePicBox');
    }
  }
}
</script>

<style lang="scss">
.view_picture {
  .el-carousel {
    .el-carousel__container {
      height: 500px;
      text-align: center;

      img {
        height: 100%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.view_picture_footer {
  text-align: center;
  margin-top: 15px;

  .el-button {
    width: 100px;
    height: 35px;
  }
}
</style>